<template>
    <div>
        <el-card style="border: 0px" shadow="never">
            <el-table
                    :data="traces"
                    stripe
                    v-loading="loading"
                    element-loading-text="玩命加载中...请稍后...."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 1)"
                    :tree-props="{children: 'children'}"
                    size="mini"
                    :height="600"
                    row-key="id"
                    :header-cell-style="{fontSize:'12px'}">
                <el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
                <el-table-column prop="timestamp" label="请求时间" align="center">
                    <template slot-scope="scope">
                        {{formatDateNoWeek(scope.row.timestamp)}}
                    </template>
                </el-table-column>
                <el-table-column prop="request.uri" label="请求接口" align="center" width="450px"></el-table-column>
                <el-table-column prop="request.method" label="请求方式" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.request.method == 'POST'">{{scope.row.request.method}}</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.request.method == 'GET'">{{scope.row.request.method}}</el-tag>
                        <el-tag type="warning" v-else>{{scope.row.request.method}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="response.status" label="响应码" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.response.status == 200">{{scope.row.response.status}}</el-tag>
                        <el-tag type="primary" v-else-if="scope.row.response.status == 404">{{scope.row.response.status}}</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.response.status == 500">{{scope.row.response.status}}</el-tag>
                        <el-tag type="warning" v-else>{{scope.row.response.status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="timeTaken" label="耗时" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="(scope.row.timeTaken / 1000) < 1">{{scope.row.timeTaken / 1000}}秒</el-tag>
                        <el-tag type="danger" v-if="(scope.row.timeTaken / 1000) > 1">{{scope.row.timeTaken / 1000}}秒</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    import { findHttpTraces } from '@/api/system/actuator'

    export default {
        name: "system-actuator-index",
        data(){
            return {
                loading:true,
                traces:[]
            }
        },

        methods:{
            formatDateNoWeek(date){
                date = date +"";
                date = date.substr(0,date.indexOf("."));
                return new Date(parseInt(date) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
            },
            findHttpTraces(){
                findHttpTraces().then(res=>{
                    let arr = res.data.traces;
                    if(arr && arr.length > 0){
                        for(let i = 0; i < arr.length; i ++){
                            if(arr[i].request.method == 'OPTIONS'){
                                continue;
                            }else if(arr[i].request.uri.includes("actuator")){
                                continue;
                            }else if(arr[i].request.uri.includes("profile")){
                                continue;
                            }else{
                                this.traces.push(arr[i]);
                            }
                        }
                    }
                    this.loading = false;
                })
            }
        },

        created() {
            this.findHttpTraces();
        }
    }
</script>

<style scoped>

</style>